<template>
  <view class="commentitem">
    <view class="header">
      <view>
        <uv-avatar
          size="24"
          src="https://mxzj-translate.oss-cn-chengdu.aliyuncs.com/catv2/appfile/image/img/%E4%BA%BA%E5%B7%A5%403x.png"
          shape="square"
        ></uv-avatar>
      </view>
      <view class="header_right">
        <view class="top">
          <view>鉴定</view>
        </view>
        <view class="top2" v-if="data.userremarkstime">
          <view>{{
            dayjs(data.userremarkstime).format("YYYY-MM-DD HH:mm:ss")
          }}</view>
        </view>
      </view>
    </view>
    <view class="datacontext">
      <view v-if="data.identifycomment?.isfeedback">
        <uv-button
          size="mini"
          :custom-style="_miniButton"
          plain
          hairline
          color="#748ee2"
        >
          <text
            :style="{
              marginRight: data.identifystate === '自动鉴定' ? '4px' : 0,
            }"
          >
            门店需反馈
          </text>
          <uv-avatar
            v-if="data.identifystate === '自动鉴定'"
            size="12"
            src="https://mxzj-translate.oss-cn-chengdu.aliyuncs.com/catv2/appfile/image/img/AI%403x.png"
            shape="square"
          ></uv-avatar>
        </uv-button>
      </view>
      <view v-if="data.isbad">
        <uv-button
          size="mini"
          :custom-style="_miniButton"
          plain
          hairline
          color="#748ee2"
          :title="data.liabilityreason"
        >
          <text
            :style="{
              marginRight: data.identifystate === '自动鉴定' ? '4px' : 0,
            }"
          >
            无需关注
          </text>
          <uv-avatar
            v-if="data.identifystate === '自动鉴定'"
            size="12"
            src="https://mxzj-translate.oss-cn-chengdu.aliyuncs.com/catv2/appfile/image/img/AI%403x.png"
            shape="square"
          ></uv-avatar>
        </uv-button>
      </view>
      <view v-if="data.isbadreversal">
        <uv-button
          size="mini"
          :custom-style="_miniButton"
          plain
          hairline
          color="#748ee2"
          >{{ "差评翻转" }}</uv-button
        >
      </view>
      <view v-for="(v, e) in label" :key="e">
        <uv-button
          size="mini"
          :custom-style="_miniButton"
          plain
          hairline
          color="#748ee2"
          >{{ v }}</uv-button
        >
      </view>
    </view>

    <view class="datacontext-button" v-if="bottonshow">
      <uv-button
        :custom-style="submitButton"
        @click="
          navigateTo(`/pages/comment/createidentifycomment?id=${data.id}`)
        "
      >
        编辑鉴定
      </uv-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { navigateTo } from "@/util/navigator";
import { submitButton, miniButton } from "@/util/style";
import dayjs from "dayjs";
import { assign } from "lodash-es";
import { computed } from "vue";

const _miniButton = assign({}, miniButton, {
  background: "#f8f9fd",
});

const p = withDefaults(
  defineProps<{
    data: Eps.BaseUserCommentEntity;
    identifylabel: Eps.identifylabelEntity[];
    bottonshow?: boolean;
  }>(),
  {
    identifylabel: () => [],
    bottonshow: false,
  }
);

const label = computed(() => {
  return (p.data.identifycomment?.identifylabelids || [])
    .map((v) => {
      return p.identifylabel.find((e) => e.id == v)?.name;
    })
    .filter((c) => c);
});
</script>

<style scoped lang="scss">
.commentitem {
  background-color: $uni-text-color-inverse;
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  gap: 24rpx;

  .header {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    width: 100%;

    .header_right {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .top {
        height: 43rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-weight: 600;
      }

      .top2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 24rpx;
        color: rgba(170, 170, 170, 1);
      }
    }
  }

  .datacontext {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
  }

  .datacontext-button {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 46rpx;
  }
}
</style>
